<template>
    <div class='article-container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航
        https://element.eleme.cn/#/zh-CN/component/breadcrumb#tu-biao-fen-ge-fu -->
        <breadcrump>内容管理</breadcrump>
      </div>

      <el-form ref="form" :model="form" label-width="80px" v-loading="isLoading">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="null">全部</el-radio>
            <el-radio label="0">草稿</el-radio>
            <el-radio label="1">待审核</el-radio>
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核失败</el-radio>
            <el-radio label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

        <channel v-model="form.ChannelId"></channel>

        <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker 
            type="daterange" 
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="选择日期" 
            end-placeholder="选择日期" 
            v-model="form.date" 
            style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="onSubmit" :loading="isLoading">查询</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top:20px;">
      <div slot="header" class="clearfix">
        根据筛选条件查询到{{total_count}}条数据,当前是第{{curPage}}页:
      </div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column  label="封面">
            <template slot-scope="scope">
            <div>{{scope.row.cover.images[0]}}</div>
            <el-image
              :src="scope.row.cover.images[0]"
              style="width:150px;height:100px"
              lazy
              >
                <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                </div>
            </el-image>
            </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        >
        </el-table-column>
        <el-table-column
          label="状态"
        >
        <template slot-scope="scope">
            
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="pubdate"
          label="发布时间"
        >
        </el-table-column>

        <el-table-column
          
          label="操作">     
          <template slot-scope="scope">
              <!-- scope.row:表示这一行的数据 -->
              <!-- scope.$index:表示这一行的索引 -->
            <el-button type='primary' icon="el-icon-edit" circle @click="hEdit(scope.$index,scope.row)"></el-button>
            <el-button type='danger' icon="el-icon-delete" circle @click="hDelete(scope.$index,scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    <!-- 分页 -->
    <el-pagination
              v-show="total_count>10"
              :disabled="isLoading"
               style="margin-top:10px;"
               background
               layout="prev, pager, next"
               @current-change="hPageChange"
               :total="total_count">
</el-pagination>
    </el-card>
    
  </div>
</template>

<script>
import Channel from '@/components/Channel.vue'
import axios from 'axios'
import JSONbig from 'json-bigint'
import router from '@/router/index.js'
// import breadcrumb from '@/components/breadCrumb.vue'
axios.defaults.transformResponse=[function(data){
  // console.log('111111',data);
  try {
    // console.log(111111,data);
    // 尝试转换，如果是JSON字符串，就没有问题
    // 如果不是json字符串，就会到catch中去，直接返回这个数据
    return JSONbig.parse(data)
  } catch(err){
    console.log(err);
  }
  
}]
export default {

     components:{
         Channel,
        //  breadcrumb
     },
  data () {
    return {
        isLoading:true,
      form: {
        name: '',
        region: '',
        date:'',// 表单筛选的日期范围
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        status:null,
        ChannerId:null
      },
      tableData: [
        
      ],
      total_count:0,// 表示当前查询得到的总条数
      curPage:1 // 表示当前要查询的页码
    }
  },
  computed: { 
      
  },
  created () { 
      this.hQuery()
  },
  methods: {
      hPageChange(a){
          // 根据当前的页码,重发请求
          this.curPage=a
          this.hQuery()
      },
      onSubmit(){
          this.hQuery()
      },
    hQuery () {
        const token = localStorage.getItem('tokenInfo')
        // 1.日期范围
        let begin_pubdate=null
        let end_pubdate=null
        let status = this.status
        // 2.根据用户选中的日期进行赋值
        if(this.form.date){
            begin_pubdate = this.form.date[0]
            end_pubdate = this.form.date[1]
        }
        
        axios({
            method:'get',
            url:'http://ttapi.research.itcast.cn/mp/v1_0/articles',
            params:{
                page:this.curPage,
                begin_pubdate,
                end_pubdate,
                status:this.status,
                channelId:this.form.ChannelId

                }
                ,
            headers:{
                Authorization:`Bearer ${token}`
            }
        }).then(res=>{
            // console.log(res);
            this.tableData=res.data.data.results
            this.total_count=res.data.data.total_count
            this.isLoading=false
        }).catch(err=>{
          console.log(err)
          this.$message.error('查询失败')
          this.total_count=0
          this.isLoading=true
        })
    },
    hEdit (index, row) {
      const idStr = row.id.toString()
      // console.log(index, row)
      console.log("11111",idStr);
      this.$router.push({
        name:'editArticle',
        params:{
          id:idStr
        }
      })
    },
    hDelete (index, row) {
      // 1.做删除，弹窗提示用户确认
      // 2.获取id，调用接口
      // 这里的id是不准确的！！！！！！
      this.$confirm('你确定要删除吗')
      .then(()=>{
          const id = row.id.toString()
          const token = localStorage.getItem('tokenInfo')
          axios({
                  method:'delete',
                  url:`http://ttapi.research.itcast.cn/mp/v1_0/articles/${id}`,
                  headers:{
                      Authorization:`Bearer ${token}`
                  }
              }).then(res=>{
                  this.$message({
                      message:'删除成功',
                      type:'success'
                  })
                  // 3.根据接口的反馈信息做后续处理
                // 如果这个操作不报错误，则可以认为是删除成功
                // 下面更新页面，有俩种方案
                // （1）再做一次查询 this.hQuery() 这个更加严谨，数据是从后端再次请求来的
                // （2）不做查询，直接删除当前这一行数据 this.articles.splice(index,1)
                  this.hQuery()
              }).catch(err=>{
                  this.$message({
                      message:'删除失败，目前只能删除草稿',
                      type:'error'
                  })
              })
                
      }).catch(()=>{

      })
      
      // 3.根据接口的反馈信息做后续处理
        
        
    //   console.log(index, row)
   
    }
  }
}

</script>

<style lang="stylus">

</style>